<template>
  <el-select v-model="_value" :disabled="disabled" clearable filterable placeholder="请选择门店" :style="'width: 100%; max-width: ' + maxWidth" @change="change">
    <el-option v-for="(item, index) in list" :key="index" :value="item[field]" :label="item.storeName" />
  </el-select>
</template>

<script>
import { storeList } from '@/api/shop'
import { linkShopList } from '@/api/commodity'

export default {
  name: 'StoreSelect',
  props: {
    field: {
      type: String,
      default: 'storeName'
    },
    maxWidth: {
      type: String,
      default: '400px'
    },
    value: {
      type: [String, Number, Object, Array],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    storeId: {
      type: [Number, String],
      default: null
    },
    goodsId: {
      type: [Number, String],
      default: null
    },
    onlyGoods: {
      type: Boolean,
      default: false
    },
    linkGoods: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.getStoreList()
  },
  methods: {
    change(value) {
      const vm = this
      vm.$emit('change', vm._value)
    },
    refresh(provinceId, cityId, villageId, searchKey) {
      const vm = this
      vm._value = null
      vm.list = []
      vm.$emit('change', vm._value)
      vm.getStoreList(provinceId, cityId, villageId, searchKey)
    },
    getStoreList(provinceId, cityId, villageId, searchKey) {
      const vm = this
      const data = {
        province: provinceId,
        city: cityId,
        area: villageId,
        searchKey: searchKey,
        page: 1,
        limit: 0
      }
      if (!data.province) {
        delete data.province
      }
      if (!data.city) {
        delete data.city
      }
      if (!data.area) {
        delete data.area
      }
      if (!data.searchKey) {
        delete data.searchKey
      }

      if (vm.onlyGoods) {
        if (vm.goodsId) {
          data['commodityId'] = parseInt(vm.goodsId)
          if (vm.linkGoods) {
            data['type'] = 1
          } else {
            data['type'] = 0
          }
          linkShopList(data).then(res => {
            vm.list = res.data.data.list
            vm._value = null
            vm.$emit('change', vm._value)
          }).catch(res => {
            if (res && res.data && res.data.errno !== 0) {
              this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        } else {
          vm.list = []
          vm._value = null
          vm.$emit('change', vm._value)
        }
      } else {
        storeList(data).then(res => {
          vm.list = res.data.data.list
          if (vm.storeId) {
            vm._value = vm.storeId
          }
        }).catch(res => {
          if (res && res.data && res.data.errno !== 0) {
            this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
